'use client'
import React, { useRef, useEffect } from "react";
import facecat from "./facecat"
/*
  * 鼠标按下实现方法
  * view:视图
  * mp:坐标
  * button:按钮
  * clicks:点击次数
  * delta:滚轮值
  */
let onMouseDown = function (view, mp, buttons, clicks, delta) {
    if (view.viewType == "chart") {
      if (!view.data || view.data.length == 0) {
          return;
      }
      if (view.addingPlot.length > 0) {
		  facecat.addPlotDefault(view, true, mp, false, mp);
          view.addingPlot = "";
          facecat.invalidateView(view);
      } else {
		  facecat.touchDownChart(view, true, mp, false, mp);
          facecat.invalidateView(view);
      }
  }else{
    facecat.onMouseDownDefault(view, mp, buttons, clicks, delta);
  }
};

/*
* 鼠标移动实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseMove = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseMoveDefault(view, mp, buttons, clicks, delta);
};

/*
* 鼠标滚动实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseWheel = function (view, mp, buttons, clicks, delta) {
  if (window.event.ctrlKey && view.paint) {
      if (delta > 0) {
          view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
          view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
          resizeAll();
      } else if (delta < 0) {
          if (view.paint.scaleFactorX > 0.2) {
              view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
              view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
              resizeAll();
          }
      }
      return;
  }
  facecat.onMouseWheelDefault(view, mp, buttons, clicks, delta);
};

/*
* 鼠标抬起实现方法
* view:视图
* mp:坐标
* button:按钮
* clicks:点击次数
* delta:滚轮值
*/
let onMouseUp = function (view, mp, buttons, clicks, delta) {
	facecat.onMouseUpDefault(view, mp, buttons, clicks, delta);
};

/*
* 触摸开始方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
	if (view.viewType == "chart") {
		if (!view.data || view.data.length == 0) {
			return;
		}
		if (view.addingPlot.length > 0) {
			facecat.addPlotDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
			view.addingPlot = "";
			facecat.invalidateView(view);
		} else {
			facecat.touchDownChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
			facecat.invalidateView(view);
		}
	}else{
    facecat.onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
  }
}

/*
* 触摸移动方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
	facecat.onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
}

/*
* 触摸结束方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
	facecat.onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
}

/*
* 鼠标点击实现方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks 点击次数
*/
let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
	facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
	if (view.viewName == "Indicator") {
		if (view.text == "BOLL" || view.text == "MA") {
			tChart.mainIndicator = view.text;
		} else {
			tChart.showIndicator = view.text;
		}
		facecat.calcChartIndicator(tChart);
		let tabView2 = view.parent.parent.parent;
		facecat.selectTabPage(tabView2, tabView2.tabPages[0]);
		facecat.invalidate(view.paint);
	} else if (view.viewName == "Plot") {
		tChart.addingPlot = view.text;
		let tabView3 = view.parent.parent.parent;
		facecat.selectTabPage(tabView3, tabView3.tabPages[0]);
		facecat.invalidate(view.paint);
	}
}

let gPaint = new facecat.FCPaint();
let init = false;
let tChart = null;

/*
 * 重置大小
 */
 let resizeAll = function () {
	try {
		const canvas = gPaint.canvas;
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};

const Canvas = (props) => {
    const canvasRef = useRef(null)

    useEffect(() => {
        const canvas = canvasRef.current
        if (!init) {
          gPaint.canvas = canvas;
		  gPaint.isMobile = facecat.isMobileMode();
    	  window.addEventListener('resize', resizeAll, true);
          facecat.addMouseDownEvent(canvas, gPaint, onMouseDown);
          facecat.addMouseMoveEvent(canvas, gPaint, onMouseMove);
          facecat.addMouseWheelEvent(canvas, gPaint, onMouseWheel);
          facecat.addMouseUpEvent(canvas, gPaint, onMouseUp, onClick);
          facecat.addTouchBeginEvent(canvas, gPaint, onTouchBegin);
          facecat.addTouchMoveEvent(canvas, gPaint, onTouchMove);
          facecat.addTouchEndEvent(canvas, gPaint, onTouchEnd, onClick);
		  canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          gPaint.defaultUIStyle = "dark";
          facecat.scaleCanvas(gPaint);
          gPaint.onPaint = function (view, paint, clipRect) {
            facecat.onPaintDefault(view, paint, clipRect);
          }
          gPaint.onPaintBorder = function (view, paint, clipRect) {
            facecat.onPaintBorderDefault(view, paint, clipRect);
          }
          gPaint.onUpdateView = function (views) {
            facecat.updateViewDefault(views);
          }
          let mode = 1;
          if (mode == 0) {
            let xml = `<?xml version="1.0" encoding="UTF-8"?>
            <html xmlns="facecat">
              <head>
              </head>
              <body>
              <div type="splitlayout" name="divAll" candragsplitter="true" layoutstyle="toptobottom" dock="fill" size="400,505" splitterposition="0,80,400,80" bordercolor="none">
                <div type="tab" name="tabTradeAccount" bordercolor="none" backcolor="none">
                <div type="tabpage" name="pageTradeAccount" text="Position" headersize="100,0" backcolor="none" bordercolor="none" padding="5,5,5,5">
                  <table name="gridTradeAccount" dock="fill" headerheight="70" showhscrollbar="false" bordercolor="none">
                  <tr>
                    <th name="colF1" text="colF1" width="120" location="0,0" size="120,70"/>
                    <th name="colF2" text="colF2" width="120"/>
                    <th name="colF3" text="colF3" width="120"/>
                    <th name="colF4" text="colF4" width="120" location="240,0" size="120,70"/>
                    <th name="colF5" text="colF5" width="120"/>
                    <th name="colF6" text="colF6" width="120"/>
                    <th name="colF7" text="colF7" width="120"/>
                    <th name="colF8" text="colF8" width="120"/>
                    <th name="colF9" text="colF9" width="120"/>
                    <th name="colF10" text="colF10" width="120"/>
                    <th name="colF11" text="colF11" width="120"/>
                    <th name="colF12" text="colF12" width="120"/>
                    <th name="colF13" text="colF13" width="120"/>
                    <th name="colF14" text="colF14" width="120"/>
                    <th name="colF15" text="colF15" width="120"/>
                    <th name="colF16" text="colF16" width="120"/>
                    <th name="colF17" text="colF17" width="120"/>
                    <th name="colF18" text="colF18" width="120"/>
                    <th name="colF19" text="colF19" width="120"/>
                    <th name="colF20" text="colF20" width="120"/>
                    <th name="colF21" text="colF21" width="120"/>
                  </tr>
                  </table>
                </div>
                </div>
                <div type="splitlayout" name="divBottom" candragsplitter="true" layoutstyle="bottomtotop" size="400,450" splitterposition="0,430,400,430" bordercolor="none" backcolor="none">
                <div name="divStatus" size="966,17">
                  <label name="lblTradingTime" text="--" location="3,2" size="100,20" font="Default,12"/>
                  <label name="lbllog" text="--" location="105,2" size="352,20" font="Default,12"/>
                </div>
                <div type="splitlayout" name="divMiddle" candragsplitter="true" layoutstyle="toptobottom" size="600,600" splitmode="percentsize" splitterposition="0,450,400,450" bordercolor="none" backcolor="none">
                  <div type="splitlayout" name="divMiddleTop" candragsplitter="true" layoutstyle="bottomtotop" size="600,600" splitterposition="0,330,400,330" bordercolor="none" backcolor="none">
                  <div bordercolor="none" padding="5,5,5,5" backcolor="none">
                    <div type="splitlayout" name="divMain" dock="fill" candragsplitter="true" layoutstyle="lefttoright" size="420,420" splitterposition="310,0,310,300" bordercolor="none" backcolor="none">
                    <div bordercolor="none" backcolor="none" padding="0,0,5,0">
                      <div type="tab" name="tabTradeMain" selectedindex="0" location="0,0" size="1166,270" dock="fill">
                      <div type="tabpage" name="pageTrade" text="StandardTrade" backcolor="none" bordercolor="none">
                        <div name="divTrade" size="310,250" dock="fill" location="0,0" bordercolor="none" backcolor="none">
                        <label name="lblContract" text="Code" location="8,18" size="37,20" font="Default,14"/>
                        <label name="lblBuySell" text="BidSell" location="8,49" size="38,19" font="Default,14"/>
                        <input type="button" name="btnOpenCloseMode" text="Auto" location="3,76" size="46,20"/>
                        <label name="lblVolume" text="Volume" location="8,109" size="38,19" font="Default,14"/>
                        <input type="radio" name="rbOpen" backcolor="rgba(43,138,195,100)" checked="true" text="Open" location="52,76" size="65,20" groupname="OpenClose"/>
                        <input type="radio" name="rbCloseToday" text="CloseToday" location="120,76" size="65,20" groupname="OpenClose"/>
                        <input type="radio" name="rbClose" text="Close" location="182,76" size="65,20" groupname="OpenClose"/>
                        <input type="radio" name="rbBuy" backcolor="rgba(255,0,0,100)" checked="true" text="Bid" location="53,47" size="64,20" groupname="BuySell"/>
                        <input type="radio" name="rbSell" text="Sell" location="119,47" size="64,20" groupname="BuySell"/>
                        <input type="text" name="txtIssueCode" font="Default,20" location="53,11" size="163,28" lineheight="28" multiline="false"/>
                        <input type="checkbox" name="cbLock" text="Lock" location="220,15" size="73,20" canfocus="false" buttonsize="16,16"/>
                        <input type="range" name="spinVolume" font="Default,20" digit="0" location="52,102" size="115,28" lineheight="28" maximum="100000000" minimum="1" textalign="far"/>
                        <input type="range" name="spinPrice" digit="2" font="Default,20" location="52,142" size="115,24" lineheight="28" maximum="100000000" textalign="far"/>
                        <input type="button" name="btnOrder" font="Default,16" text="Order" backcolor="rgb(15,193,118)" location="8,179" size="211,48"/>
                        <input type="button" name="btnCancel" text="Cancel" location="226,184" backcolor="rgb(248,73,96)" size="74,24" font="Default,12"/>
                        <input type="button" name="btnPreCondition" text="Condition" location="226,209" size="74,23" font="Default,12"/>
                        <label name="lblLess" text="&lt;=" location="185,104" size="26,21" font="Default,16"/>
                        <label name="lblMaxVolume" text="0" location="206,104" size="16,21" font="Default,16"/>
                        <label name="lblUp" text="0" location="188,121" size="100,20" opacity="1"/>
                        <label name="lblAskPrice" text="0" location="188,135" size="53,20"/>
                        <label name="lblBidPrice" text="0" location="188,149" size="51,21"/>
                        <label name="lblDown" text="0" location="188,163" size="48,20"/>
                        <label name="Label" text="/" location="241,136" size="17,20" font="Default,12"/>
                        <label name="Label1" text="/" location="239,150" size="16,20" font="Default,12"/>
                        <label name="lblAskVolume" text="0" location="250,136" size="57,18"/>
                        <label name="lblBidVolume" text="0" location="250,150" size="57,20"/>
                        <input type="button" name="btnTradeMode" text="Follow" location="3,143" size="46,20"/>
                        </div>
                      </div>
                      <div type="tabpage" name="pageTradeSetting" text="Settings" backcolor="none" bordercolor="none">
                        <div name="divTradeSettings" dock="fill" backcolor="none" bordercolor="none">
                        <input type="checkbox" name="cbStartFastTrading" text="StartFastTrade" location="171,66" size="115,20" checked="true"/>
                        <input type="button" name="btnHotKeySetting" font="Default,12" text="FastTradeSettings" location="14,59" size="155,30"/>
                        <input type="button" name="btnAutoCloseSetting" font="Default,12" text="AutoCloseSttings" location="14,96" size="155,30"/>
                        <input type="button" name="btnAllCloseOrCancelSetting" font="Default,12" text="AllCloseOrCancelSetting" location="14,134" size="155,30"/>
                        <input type="button" name="btnAutoCancelSetting" font="Default,12" text="AutoCancelSetting" location="14,172" size="155,30"/>
                        <input type="button" name="btnDefaultVolumeSetting" font="Default,12" text="DefaultVolumeSetting" location="14,22" size="155,30"/>
                        <input type="checkbox" name="cbStartAutoClose" text="StartAutoClose" location="171,103" size="113,20" checked="true"/>
                        <input type="checkbox" name="cbStartAutoCancel" text="StartAutoCancel" location="173,172" size="110,21" checked="true"/>
                        </div>
                      </div>
                      </div>
                    </div>
                    <div type="splitlayout" name="divMain" dock="fill" candragsplitter="true" layoutstyle="righttoleft" size="420,420" splitterposition="100,0" bordercolor="none" backcolor="none">
                      <div bordercolor="none" backcolor="none" padding="5,0,0,0">
                      <div type="tab" name="tabOrder2" selectedindex="1" dock="fill">
                        <div type="tabpage" name="pageChart" text="Chart" bordercolor="none" backcolor="none">
                        <div type="splitlayout" name="divChart" dock="fill" layoutstyle="toptobottom" size="400,400" splitterposition="0,30,400,30" bordercolor="none" backcolor="none">
                          <div bordercolor="none" backcolor="none">
                          <label name="lblKLineCode" text="cu1906" location="10,7" size="56,22" font="Default,14"/>
                          <input type="radio" name="rbday" text="DayLine" location="427,6" size="68,20"/>
                          <input type="radio" name="rb5m" text="5M" location="104,6" size="72,20" checked="True"/>
                          <input type="radio" name="rb15m" text="15M" location="181,6" size="74,20"/>
                          <input type="radio" name="rb30m" text="30M" location="262,6" size="70,20"/>
                          <input type="radio" name="rb60m" text="60M" location="341,6" size="75,20"/>
                          </div>
                          <chart name="chart" dock="fill"/>
                        </div>
                        </div>
                      </div>
                      </div>
                      <div type="tab" name="tabOrder" selectedindex="1">
                      <div type="tabpage" name="pageNoTrade" text="NoTrade" backcolor="none" bordercolor="none">
                        <div type="splitlayout" name="divNoTrade" dock="fill" layoutstyle="righttoleft" size="400,400" splitterposition="320,0,320,400" backcolor="none" bordercolor="none">
                        <div name="divCancelOrder" location="285,0" size="78,338" backcolor="none" bordercolor="none">
                          <input type="button" name="btnCancelOrder" checked="true" size="60,60" text="Cancel" location="7,12"/>
                          <input type="button" name="btnCancelAllOrders" location="7,75" size="60,60" text="CancelAll"/>
                        </div>
                        <table name="gridNoTrade" location="122,50" size="209,248" backcolor="none" bordercolor="none">
                          <tr>
                          <th name="colU11" columntype="no" horizontalalign="far" text="colU11" allowsort="false" width="80"/>
                          <th name="colU1" columntype="text" text="colU1" width="80"/>
                          <th name="colU2" columntype="text" text="colU2" width="80"/>
                          <th name="colU3" columntype="text" horizontalalign="center" text="colU3" width="60"/>
                          <th name="colU4" columntype="text" horizontalalign="center" text="colU4" width="60"/>
                          <th name="colU5" columntype="int" horizontalalign="far" text="colU5" width="80"/>
                          <th name="colU6" columntype="int" horizontalalign="far" text="colU6" width="80"/>
                          <th name="colU7" columntype="double" horizontalalign="far" text="colU7" width="80"/>
                          <th name="colU8" columntype="text" horizontalalign="center" text="colU8" width="80"/>
                          <th name="colU9" columntype="double" horizontalalign="far" text="colU9" width="80"/>
                          <th name="colU10" columntype="double" horizontalalign="far" text="colU10" width="80"/>
                          <th name="colU12" columntype="text" text="colU12" width="80"/>
                          <th name="colU13" columntype="text" horizontalalign="center" text="colU13" width="60"/>
                          <th name="colU14" columntype="int" horizontalalign="far" text="colU14" width="60"/>
                          <th name="colU15" columntype="text" text="colU15" width="100"/>
                          <th name="colU16" columntype="text" text="colU16" width="100"/>
                          <th name="colU17" columntype="text" text="colU17" width="80"/>
                          <th name="colU18" columntype="text" horizontalalign="center" text="colU18" width="100"/>
                          <th name="colU19" columntype="double" text="colU19" width="80"/>
                          <th name="colU20" columntype="text" horizontalalign="center" text="colU20" width="80"/>
                          <th name="colU21" columntype="text" text="colU21" width="80"/>
                          <th name="colU22" columntype="text" text="colU22" width="80"/>
                          <th name="colU23" columntype="text" text="colU23" width="200"/>
                          <th name="colU24" columntype="text" text="colU24" width="80"/>
                          <th name="colU25" columntype="text" text="colU25" width="100"/>
                          <th name="colU26" columntype="text" text="colU26" width="80"/>
                          </tr>
                        </table>
                        </div>
                      </div>
                      <div type="tabpage" name="pageAllOrders" text="AllOrder" backcolor="none" bordercolor="none">
                        <div type="splitlayout" name="divOrder" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" backcolor="none" bordercolor="none">
                        <div name="divDealRecordType" backcolor="none" bordercolor="none">
                          <input type="radio" name="rdAllOrders" groupname="allOrders" checked="true" location="0,6" text="AllOrders" size="100,20"/>
                          <input type="radio" name="rdOrder" groupname="allOrders" location="100,6" text="Order" size="100,20"/>
                          <input type="radio" name="rdDeal" groupname="allOrders" location="200,6" text="Deal" size="100,20"/>
                          <input type="radio" name="rdCancel" groupname="allOrders" location="300,6" text="Cancel" size="120,20"/>
                          <input type="button" name="btnCancelOrder2" location="450,2" size="100,26" text="Cancel"/>
                          <input type="button" name="btnCancelAllOrder2" location="570,2" size="100,26" text="CancelAll"/>
                        </div>
                        <table name="gridOrder" dock="Fill" size="569,330" backcolor="none" bordercolor="none">
                          <tr>
                          <th name="colA17" columntype="no" horizontalalign="far" text="colA17" allowsort="false" width="80"/>
                          <th name="colA1" columntype="text" text="colA1" width="80"/>
                          <th name="colA2" columntype="text" text="colA2" width="80"/>
                          <th name="colA3" columntype="text" horizontalalign="center" text="colA3" width="60"/>
                          <th name="colA4" columntype="text" horizontalalign="center" text="colA4" width="60"/>
                          <th name="colA5" columntype="text" horizontalalign="center" text="colA5" width="140"/>
                          <th name="colA6" columntype="double" horizontalalign="far" text="colA6" width="80"/>
                          <th name="colA7" columntype="int" horizontalalign="far" text="colA7" width="80"/>
                          <th name="colA8" columntype="int" horizontalalign="far" text="colA8" width="80"/>
                          <th name="colA9" columntype="int" horizontalalign="far" text="colA9" width="80"/>
                          <th name="colA10" columntype="text" horizontalalign="center" text="colA10" width="60"/>
                          <th name="colA11" columntype="text" horizontalalign="center" text="colA11" width="80"/>
                          <th name="colA12" columntype="double" horizontalalign="far" text="colA12" width="80"/>
                          <th name="colA13" columntype="double" horizontalalign="far" text="colA13" width="80"/>
                          <th name="colA14" columntype="double" horizontalalign="far" text="colA14" width="80"/>
                          <th name="colA15" columntype="text" horizontalalign="center" text="colA15" width="60"/>
                          <th name="colA16" columntype="text" text="colA16" width="80"/>
                          <th name="colA18" columntype="text" horizontalalign="center" text="colA18" width="100"/>
                          <th name="colA19" columntype="text" text="colA19" width="200"/>
                          <th name="colA20" columntype="text" horizontalalign="center" text="colA20" width="60"/>
                          <th name="colA21" columntype="text" horizontalalign="center" text="colA21" width="80"/>
                          <th name="colA22" columntype="text" horizontalalign="center" text="colA22" width="80"/>
                          <th name="colA23" columntype="text" text="colA23" width="80"/>
                          <th name="colA24" columntype="text" text="colA24" width="80"/>
                          <th name="colA25" columntype="text" text="colA25" width="60"/>
                          </tr>
                        </table>
                        </div>
                      </div>
                      <div type="tabpage" name="pageParkedOrder" text="ParkedOrder" backcolor="none" bordercolor="none">
                        <div type="splitlayout" name="divParkedOrder" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,350,400,350" backcolor="none" bordercolor="none">
                        <div name="divDealRecordType" location="-1,200" backcolor="none" bordercolor="none">
                          <input type="radio" name="rdAllCondition" groupname="condition" checked="true" location="0,4" text="AllCondition" size="100,20"/>
                          <input type="radio" name="rdPreCondition" groupname="condition" location="80,4" text="PreCondition" size="100,20"/>
                          <input type="radio" name="rdCondition" groupname="condition" location="160,4" text="Condition" size="100,20"/>
                          <input type="radio" name="rdSend" groupname="condition" location="240,4" text="Send" size="100,20"/>
                          <input type="button" name="btnDeleteCondition" location="320,2" size="100,26" text="DeleteCondition"/>
                          <input type="button" name="btnSendCondition" location="424,2" size="100,26" text="SendCondition"/>
                          <input type="button" name="btnClearCondition" location="528,2" size="100,26" text="ClearCondition"/>
                          <label name="lblConditionTip" textcolor="rgba(255,0,0,255)" location="10,30" size="500,20" text="ConditionTip"/>
                        </div>
                        <table name="gridParkedOrder" backcolor="none" bordercolor="none">
                          <tr>
                          <th name="colI1" columntype="text" text="colI1" width="100"/>
                          <th name="colI2" columntype="text" text="colI2" width="80"/>
                          <th name="colI3" columntype="text" text="colI3" width="250"/>
                          <th name="colI4" columntype="text" text="colI4" width="60"/>
                          <th name="colI5" columntype="text" horizontalalign="center" text="colI5" width="80"/>
                          <th name="colI6" columntype="text" horizontalalign="center" text="colI6" width="80"/>
                          <th name="colI7" columntype="double" horizontalalign="far" text="colI7" width="80"/>
                          <th name="colI8" columntype="int" horizontalalign="far" text="colI8" width="80"/>
                          <th name="colI9" columntype="text" horizontalalign="center" text="colI9" width="80"/>
                          <th name="colI10" columntype="text" text="colI10" width="60"/>
                          <th name="colI11" columntype="text" horizontalalign="center" text="colI11" width="80"/>
                          <th name="colI12" columntype="text" horizontalalign="center" text="colI12" width="120"/>
                          </tr>
                        </table>
                        </div>
                      </div>
                      <div type="tabpage" name="pageTradeRecord" text="TradeRecord" backcolor="none" bordercolor="none">
                        <div type="splitlayout" name="divTradeRecord" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" backcolor="none" bordercolor="none">
                        <div name="divTradeRecordType" backcolor="none" bordercolor="none">
                          <input type="radio" name="rdDetail" groupname="tradeRecordType" checked="true" location="0,5" text="Detail" size="100,20"/>
                          <input type="radio" name="rdSummary" groupname="tradeRecordType" location="100,5" text="Summary" size="100,20"/>
                        </div>
                        <div name="divTradeRecordInner" backcolor="none" bordercolor="none">
                          <table name="gridTradeRecord" dock="fill" backcolor="none" bordercolor="none">
                          <tr>
                            <th name="colR1" columntype="text" text="colR1" width="80"/>
                            <th name="colR2" columntype="text" text="colR2" width="80"/>
                            <th name="colR3" columntype="text" horizontalalign="center" text="colR3" width="60"/>
                            <th name="colR4" columntype="text" horizontalalign="center" text="colR4" width="60"/>
                            <th name="colR5" columntype="double" horizontalalign="far" text="colR5" width="80"/>
                            <th name="colR6" columntype="int" horizontalalign="far" text="colR6" width="80"/>
                            <th name="colR7" columntype="text" horizontalalign="center" text="colR7" width="80"/>
                            <th name="colR8" columntype="text" horizontalalign="center" text="colR8" width="80"/>
                            <th name="colR9" columntype="text" horizontalalign="center" text="colR9" width="80"/>
                            <th name="colR10" columntype="text" horizontalalign="center" text="colR10" width="60"/>
                            <th name="colR11" columntype="text" text="colR11" width="80"/>
                            <th name="colR12" columntype="double" horizontalalign="far" text="colR12" width="80"/>
                          </tr>
                          </table>
                          <table name="gridTradeStatistics" dock="fill" visible="false" backcolor="none" bordercolor="none">
                          <tr>
                            <th name="colS1" columntype="text" text="colS1" width="80"/>
                            <th name="colS2" columntype="text" text="colS2" width="80"/>
                            <th name="colS3" columntype="text" horizontalalign="center" text="colS3" width="80"/>
                            <th name="colS4" columntype="text" horizontalalign="center" text="colS4" width="80"/>
                            <th name="colS5" columntype="double" horizontalalign="far" text="colS5" width="100"/>
                            <th name="colS6" columntype="int" horizontalalign="far" text="colS6" width="100"/>
                            <th name="colS7" columntype="double" horizontalalign="far" text="colS7" width="100"/>
                            <th name="colS8" columntype="text" horizontalalign="center" text="colS8" width="60"/>
                          </tr>
                          </table>
                        </div>
                        </div>
                      </div>
                      </div>
                    </div>
                    </div>
                  </div>
                  <div bordercolor="none" backcolor="none" padding="5,5,5,5">
                    <div type="tab" name="tabQuote" selectedindex="0" size="400,400" dock="fill">
                    <div type="tabpage" name="pagePageQuote" text="PageQuote" bordercolor="none" backcolor="none">
                      <table name="gridLatestData" dock="fill" location="0,0" size="914,160" bordercolor="none" backcolor="none">
                      <tr>
                        <th name="colQ1" columntype="text" text="colQ1" width="80"/>
                        <th name="colQ2" columntype="text" text="colQ2" width="100"/>
                        <th name="colQ3" columntype="double" horizontalalign="far" text="colQ3" width="60"/>
                        <th name="colQ4" columntype="double" horizontalalign="far" text="colQ4" width="60"/>
                        <th name="colQ5" columntype="double" horizontalalign="far" text="colQ5" width="60" location="300,0" size="60,20"/>
                        <th name="colQ6" columntype="int" horizontalalign="far" text="colQ6" width="60" location="360,0" size="60,20"/>
                        <th name="colQ7" columntype="double" horizontalalign="far" text="colQ7" width="60"/>
                        <th name="colQ8" columntype="int" horizontalalign="far" text="colQ8" width="60"/>
                        <th name="colQ9" columntype="int" horizontalalign="far" text="colQ9" width="60"/>
                        <th name="colQ10" columntype="int" horizontalalign="far" text="colQ10" width="60"/>
                        <th name="colQ11" columntype="double" horizontalalign="far" text="colQ11" width="60"/>
                        <th name="colQ12" columntype="double" horizontalalign="far" text="colQ12" width="60"/>
                        <th name="colQ13" columntype="double" horizontalalign="far" text="colQ13" width="60"/>
                        <th name="colQ14" columntype="double" horizontalalign="far" text="colQ14" width="60"/>
                        <th name="colQ15" columntype="double" horizontalalign="far" text="colQ15" width="60"/>
                        <th name="colQ16" columntype="double" horizontalalign="far" text="colQ16" width="60"/>
                        <th name="colQ17" columntype="int" horizontalalign="far" text="colQ17" width="60"/>
                        <th name="colQ18" columntype="percent" horizontalalign="far" text="colQ18" width="60"/>
                        <th name="colQ19" columntype="double" horizontalalign="far" text="colQ19" width="60"/>
                        <th name="colQ20" columntype="thousands" horizontalalign="far" text="colQ20" width="100"/>
                        <th name="colQ21" columntype="text" text="colQ21" width="60"/>
                        <th name="colQ22" columntype="text" horizontalalign="center" text="colQ22" width="100"/>
                        <th name="colQ23" columntype="double" text="colQ23" width="60"/>
                        <th name="colQ24" columntype="double" text="colQ24" width="60"/>
                        <th name="colQ25" columntype="double" text="colQ25" width="60"/>
                        <th name="colQ26" columntype="double" text="colQ26" width="80"/>
                        <th name="colQ27" columntype="int" text="colQ27" width="80"/>
                        <th name="colQ28" columntype="double" text="colQ28" width="80"/>
                        <th name="colQ29" columntype="int" text="colQ29" width="80"/>
                        <th name="colQ30" columntype="double" text="colQ30" width="80"/>
                        <th name="colQ31" columntype="int" text="colQ31" width="80"/>
                        <th name="colQ32" columntype="int" text="colQ32" width="80"/>
                      </tr>
                      </table>
                    </div>
                    <div type="tabpage" name="pageContracts" text="Contracts" bordercolor="none" backcolor="none">
                      <table name="gridContracts" dock="fill" bordercolor="none" backcolor="none">
                      <tr>
                        <th name="colC1" columntype="text" text="colC1" width="80"/>
                        <th name="colC2" columntype="text" text="colC2" width="60"/>
                        <th name="colC3" columntype="text" text="colC3" width="100"/>
                        <th name="colC4" columntype="text" text="colC4" width="60"/>
                        <th name="colC5" columntype="int" horizontalalign="far" text="colC5" width="100"/>
                        <th name="colC6" columntype="double" horizontalalign="far" text="colC6" width="100"/>
                        <th name="colC7" columntype="text" horizontalalign="center" text="colC7" width="100"/>
                        <th name="colC8" columntype="text" horizontalalign="center" text="colC8" width="100"/>
                        <th name="colC9" columntype="percent" horizontalalign="far" text="colC9" width="100"/>
                        <th name="colC10" columntype="percent" horizontalalign="far" text="colC10" width="100"/>
                        <th name="colC11" columntype="double" horizontalalign="far" text="colC11" width="100"/>
                        <th name="colC12" columntype="double" horizontalalign="far" text="colC12" width="100"/>
                        <th name="colC13" columntype="double" horizontalalign="far" text="colC13" width="100"/>
                        <th name="colC14" columntype="percent" horizontalalign="far" text="colC14" width="100"/>
                        <th name="colC15" columntype="percent" horizontalalign="far" text="colC15" width="100"/>
                        <th name="colC16" columntype="percent" horizontalalign="far" text="colC16" width="100"/>
                        <th name="colC17" columntype="int" horizontalalign="far" text="colC17" width="100"/>
                        <th name="colC18" columntype="int" horizontalalign="far" text="colC18" width="100"/>
                      </tr>
                      </table>
                    </div>
                    </div>
                  </div>
                  </div>
                  <div bordercolor="none" padding="5,5,5,5">
                  <div type="tab" name="tabInvestorPosition" selectedindex="0" dock="fill" backcolor="none">
                    <div type="tabpage" name="pagePageInvestorPosition" text="InvestorPosition" bordercolor="none" backcolor="none">
                    <div type="splitlayout" name="divInvestorPosition" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" bordercolor="none" backcolor="none">
                      <div name="divInvestorPositionBottom" bordercolor="none" backcolor="none">
                      <input type="radio" name="cbInvestorPosition" checked="true" location="5,5" groupname="InvestorPosition" size="80,20" text="InvestorPosition"/>
                      <input type="radio" name="cbInvestorPositionDetail" groupname="InvestorPosition" location="80,5" size="80,20" text="InvestorPositionDetail"/>
                      <input type="radio" name="cbCompPosition" groupname="InvestorPosition" location="180,3" size="80,23" text="CompPosition" visible="false"/>
                      <input type="button" name="btnOpenInterestIP" location="300,3" size="80,23" text="OpenInterest" height="24"/>
                      <input type="button" name="btnMarketPositionIP" location="390,3" size="80,23" text="MarketPosition" height="24"/>
                      <input type="button" name="btnMarketBackhandIP" location="480,3" size="80,23" text="MarketBackhand" height="24"/>
                      </div>
                      <div name="divInvestorPositionTop" bordercolor="none" backcolor="none">
                      <table name="gridInvestorPosition" dock="fill" bordercolor="none" backcolor="none">
                        <tr>
                        <th name="colP1" columntype="text" text="colP1" width="80"/>
                        <th name="colP2" columntype="text" horizontalalign="center" text="colP2" width="60"/>
                        <th name="colP3" columntype="int" horizontalalign="far" text="colP3" width="60"/>
                        <th name="colP4" columntype="int" horizontalalign="far" text="colP4" width="60"/>
                        <th name="colP5" columntype="int" horizontalalign="far" text="colP5" width="60"/>
                        <th name="colP6" columntype="int" horizontalalign="far" text="colP6" width="60"/>
                        <th name="colP7" columntype="double" horizontalalign="far" text="colP7" width="80"/>
                        <th name="colP8" columntype="thousands" horizontalalign="far" text="colP8" width="150"/>
                        <th name="colP9" columntype="thousands" horizontalalign="far" text="colP9" width="100"/>
                        <th name="colP10" columntype="text" horizontalalign="center" text="colP10" width="60"/>
                        <th name="col111" columntype="text" text="colP11" width="80"/>
                        <th name="colP12" columntype="int" horizontalalign="far" text="colP12" width="60"/>
                        <th name="colP13" columntype="int" horizontalalign="far" text="colP13" width="60"/>
                        <th name="colP14" columntype="int" horizontalalign="far" text="colP14" width="60"/>
                        <th name="colP15" columntype="int" horizontalalign="far" text="colP15" width="60"/>
                        <th name="colP16" columntype="int" horizontalalign="far" text="colP16" width="100"/>
                        <th name="colP17" columntype="int" horizontalalign="far" text="colP17" width="100"/>
                        <th name="colP18" columntype="int" horizontalalign="far" text="colP18" width="100"/>
                        <th name="colP19" columntype="int" horizontalalign="far" text="colP19" width="100"/>
                        <th name="colP20" columntype="int" horizontalalign="far" text="colP20" width="100"/>
                        <th name="colP21" columntype="int" horizontalalign="far" text="colP21" width="80"/>
                        <th name="col122" columntype="int" horizontalalign="far" text="colP22" width="80"/>
                        <th name="colP23" columntype="double" horizontalalign="far" text="colP23" width="100"/>
                        <th name="colP24" columntype="double" horizontalalign="far" text="colP24" width="100"/>
                        <th name="colP25" columntype="double" horizontalalign="far" text="colP25" width="100"/>
                        <th name="colP26" columntype="thousands" horizontalalign="far" text="colP26" width="100"/>
                        <th name="colP27" columntype="thousands" horizontalalign="far" text="colP27" width="80"/>
                        <th name="colP28" columntype="int" horizontalalign="far" text="colP28" width="80"/>
                        <th name="colP29" columntype="int" horizontalalign="far" text="colP29" width="80"/>
                        <th name="colP30" columntype="double" horizontalalign="far" text="colP30" width="80"/>
                        <th name="colP31" columntype="double" horizontalalign="far" text="colP31" width="80"/>
                        <th name="colP32" columntype="text" text="colP32" width="100"/>
                        <th name="colP33" columntype="text" text="colP33" width="100"/>
                        <th name="colP34" columntype="text" text="colP34" width="100"/>
                        </tr>
                      </table>
                      <table name="gridInvestorPositionDetail" dock="fill" visible="false" bordercolor="none" backcolor="none">
                        <tr>
                        <th name="colT1" columntype="text" text="colT1" width="80"/>
                        <th name="colT2" columntype="text" text="colT2" width="80"/>
                        <th name="colT3" columntype="text" horizontalalign="center" text="colT3" width="60"/>
                        <th name="colT4" columntype="int" horizontalalign="far" text="colT4" width="60"/>
                        <th name="colT5" columntype="double" horizontalalign="far" text="colT5" width="80"/>
                        <th name="colT6" columntype="thousands" horizontalalign="far" text="colT6" width="100"/>
                        <th name="colT7" columntype="text" text="colT7" width="80"/>
                        <th name="colT8" columntype="text" horizontalalign="center" text="colT8" width="60"/>
                        <th name="colT9" columntype="text" horizontalalign="center" text="colT9" width="100"/>
                        <th name="colT10" columntype="thousands" horizontalalign="far" text="colT10" width="100"/>
                        <th name="colT11" columntype="thousands" horizontalalign="far" text="colT11" width="100"/>
                        <th name="colT12" columntype="text" text="colT12" width="80"/>
                        <th name="colT13" columntype="text" text="colT13" width="100"/>
                        <th name="colT14" columntype="double" horizontalalign="far" text="colT14" width="80"/>
                        <th name="colT15" columntype="int" horizontalalign="far" text="colT15" width="80"/>
                        <th name="colT16" columntype="thousands" horizontalalign="far" text="colT16" width="100"/>
                        <th name="colT17" columntype="double" horizontalalign="far" text="colT17" width="80"/>
                        <th name="colT18" columntype="int" horizontalalign="far" text="colT18" width="100"/>
                        </tr>
                      </table>
                      <table name="gridInvestorCombinePositionDetail" dock="fill" visible="false" bordercolor="none" backcolor="none">
                        <tr>
                        <th name="colM1" columntype="text" text="colM1" width="120"/>
                        <th name="colM2" columntype="text" horizontalalign="center" text="colM2" width="60"/>
                        <th name="colM3" columntype="int" horizontalalign="far" text="colM3" width="60"/>
                        <th name="colM4" columntype="double" horizontalalign="far" text="colM4" width="100"/>
                        <th name="colM5" columntype="text" horizontalalign="center" text="colM5" width="60"/>
                        </tr>
                      </table>
                      </div>
                    </div>
                    </div>
                  </div>
                  </div>
                </div>
                </div>
              </div>
              </body>
            </html>
               `;
			   facecat.renderFaceCat(gPaint, xml);
          }else if (mode == 1) { 
            let i = 0;
            let securityDatas = [];
            let sData1 = new facecat.SecurityData();
            sData1.volume = 78469.756458;
            sData1.close = 15684.25;
            sData1.high = 15965.01;
            sData1.low = 15272.69;
            sData1.open = 15297.22;
            sData1.date = 1605052800.0;
            securityDatas.push(sData1);
            let sData2 = new facecat.SecurityData();
            sData2.volume = 102196.366592;
            sData2.close = 16291.87;
            sData2.high = 16340.71;
            sData2.low = 15440.65;
            sData2.open = 15684.26;
            sData2.date = 1605139200.0;
            securityDatas.push(sData2);
            let sData3 = new facecat.SecurityData();
            sData3.volume = 75691.891014;
            sData3.close = 16320.71;
            sData3.high = 16480.01;
            sData3.low = 15952.36;
            sData3.open = 16291.86;
            sData3.date = 1605225600.0;
            securityDatas.push(sData3);
            let sData4 = new facecat.SecurityData();
            sData4.volume = 59116.357179;
            sData4.close = 16070.46;
            sData4.high = 16327.0;
            sData4.low = 15670.01;
            sData4.open = 16320.05;
            sData4.date = 1605312000.0;
            securityDatas.push(sData4);
            let sData5 = new facecat.SecurityData();
            sData5.volume = 43596.851513;
            sData5.close = 15957.01;
            sData5.high = 16180.01;
            sData5.low = 15774.73;
            sData5.open = 16069.57;
            sData5.date = 1605398400.0;
            securityDatas.push(sData5);
            let sData6 = new facecat.SecurityData();
            sData6.volume = 81300.685924;
            sData6.close = 16713.58;
            sData6.high = 16880.01;
            sData6.low = 15864.01;
            sData6.open = 15957.01;
            sData6.date = 1605484800.0;
            securityDatas.push(sData6);
            let sData7 = new facecat.SecurityData();
            sData7.volume = 115192.02613;
            sData7.close = 17659.39;
            sData7.high = 17858.83;
            sData7.low = 16538.01;
            sData7.open = 16713.09;
            sData7.date = 1605571200.0;
            securityDatas.push(sData7);
            let sData8 = new facecat.SecurityData();
            sData8.volume = 141984.264415;
            sData8.close = 17776.13;
            sData8.high = 18476.94;
            sData8.low = 17222.01;
            sData8.open = 17659.39;
            sData8.date = 1605657600.0;
            securityDatas.push(sData8);
            let sData9 = new facecat.SecurityData();
            sData9.volume = 93009.571008;
            sData9.close = 17802.83;
            sData9.high = 18179.81;
            sData9.low = 17335.66;
            sData9.open = 17777.76;
            sData9.date = 1605744000.0;
            securityDatas.push(sData9);
            let sData10 = new facecat.SecurityData();
            sData10.volume = 88423.028489;
            sData10.close = 18655.68;
            sData10.high = 18815.23;
            sData10.low = 17740.05;
            sData10.open = 17802.82;
            sData10.date = 1605830400.0;
            securityDatas.push(sData10);
            let sData11 = new facecat.SecurityData();
            sData11.volume = 71308.137138;
            sData11.close = 18703.81;
            sData11.high = 18965.91;
            sData11.low = 18308.59;
            sData11.open = 18655.67;
            sData11.date = 1605916800.0;
            securityDatas.push(sData11);
            let sData12 = new facecat.SecurityData();
            sData12.volume = 74492.806006;
            sData12.close = 18414.61;
            sData12.high = 18750.01;
            sData12.low = 17699.8;
            sData12.open = 18703.81;
            sData12.date = 1606003200.0;
            securityDatas.push(sData12);
            let sData13 = new facecat.SecurityData();
            sData13.volume = 74179.661546;
            sData13.close = 18368.01;
            sData13.high = 18766.01;
            sData13.low = 18000.01;
            sData13.open = 18413.89;
            sData13.date = 1606089600.0;
            securityDatas.push(sData13);
            let sData14 = new facecat.SecurityData();
            sData14.volume = 70126.693681;
            sData14.close = 19160.02;
            sData14.high = 19410.0;
            sData14.low = 18207.99;
            sData14.open = 18368.02;
            sData14.date = 1606176000.0;
            securityDatas.push(sData14);
            let sData15 = new facecat.SecurityData();
            sData15.volume = 70760.56353;
            sData15.close = 18719.12;
            sData15.high = 19444.01;
            sData15.low = 18570.01;
            sData15.open = 19160.01;
            sData15.date = 1606262400.0;
            securityDatas.push(sData15);
            let sData16 = new facecat.SecurityData();
            sData16.volume = 102420.321403;
            sData16.close = 17149.48;
            sData16.high = 18915.04;
            sData16.low = 16188.01;
            sData16.open = 18718.84;
            sData16.date = 1606348800.0;
            securityDatas.push(sData16);
            let sData17 = new facecat.SecurityData();
            sData17.volume = 84036.578341;
            sData17.close = 17139.53;
            sData17.high = 17457.63;
            sData17.low = 16438.09;
            sData17.open = 17149.48;
            sData17.date = 1606435200.0;
            securityDatas.push(sData17);
            let sData18 = new facecat.SecurityData();
            sData18.volume = 60835.734083;
            sData18.close = 17719.86;
            sData18.high = 17880.5;
            sData18.low = 16865.57;
            sData18.open = 17139.54;
            sData18.date = 1606521600.0;
            securityDatas.push(sData18);
            let sData19 = new facecat.SecurityData();
            sData19.volume = 55329.026303;
            sData19.close = 18185.0;
            sData19.high = 18360.06;
            sData19.low = 17517.01;
            sData19.open = 17719.85;
            sData19.date = 1606608000.0;
            securityDatas.push(sData19);
            let sData20 = new facecat.SecurityData();
            sData20.volume = 96227.350495;
            sData20.close = 19695.88;
            sData20.high = 19777.04;
            sData20.low = 18185.0;
            sData20.open = 18185.01;
            sData20.date = 1606694400.0;
            securityDatas.push(sData20);
            let sData21 = new facecat.SecurityData();
            sData21.volume = 100331.141203;
            sData21.close = 18764.97;
            sData21.high = 19888.01;
            sData21.low = 18350.0;
            sData21.open = 19695.88;
            sData21.date = 1606780800.0;
            securityDatas.push(sData21);
            let sData22 = new facecat.SecurityData();
            sData22.volume = 75848.875728;
            sData22.close = 19204.1;
            sData22.high = 19342.01;
            sData22.low = 18330.01;
            sData22.open = 18764.97;
            sData22.date = 1606867200.0;
            securityDatas.push(sData22);
            let sData23 = new facecat.SecurityData();
            sData23.volume = 64987.682732;
            sData23.close = 19421.91;
            sData23.high = 19598.01;
            sData23.low = 18867.21;
            sData23.open = 19204.09;
            sData23.date = 1606953600.0;
            securityDatas.push(sData23);
            let sData24 = new facecat.SecurityData();
            sData24.volume = 65481.220724;
            sData24.close = 18650.53;
            sData24.high = 19527.01;
            sData24.low = 18565.32;
            sData24.open = 19422.35;
            sData24.date = 1607040000.0;
            securityDatas.push(sData24);
            let sData25 = new facecat.SecurityData();
            sData25.volume = 42922.758573;
            sData25.close = 19147.67;
            sData25.high = 19177.01;
            sData25.low = 18500.01;
            sData25.open = 18650.52;
            sData25.date = 1607126400.0;
            securityDatas.push(sData25);
            let sData26 = new facecat.SecurityData();
            sData26.volume = 37043.101861;
            sData26.close = 19359.41;
            sData26.high = 19420.01;
            sData26.low = 18857.01;
            sData26.open = 19147.67;
            sData26.date = 1607212800.0;
            securityDatas.push(sData26);
            let sData27 = new facecat.SecurityData();
            sData27.volume = 40833.661907;
            sData27.close = 19166.91;
            sData27.high = 19420.92;
            sData27.low = 18902.89;
            sData27.open = 19358.68;
            sData27.date = 1607299200.0;
            securityDatas.push(sData27);
            let sData28 = new facecat.SecurityData();
            sData28.volume = 56080.515386;
            sData28.close = 18324.12;
            sData28.high = 19294.85;
            sData28.low = 18200.01;
            sData28.open = 19166.91;
            sData28.date = 1607385600.0;
            securityDatas.push(sData28);
            let sData29 = new facecat.SecurityData();
            sData29.volume = 75498.213856;
            sData29.close = 18541.29;
            sData29.high = 18639.58;
            sData29.low = 17650.01;
            sData29.open = 18324.12;
            sData29.date = 1607472000.0;
            securityDatas.push(sData29);
            let sData30 = new facecat.SecurityData();
            sData30.volume = 52890.685094;
            sData30.close = 18254.64;
            sData30.high = 18557.33;
            sData30.low = 17911.13;
            sData30.open = 18541.3;
            sData30.date = 1607558400.0;
            securityDatas.push(sData30);
            let sData31 = new facecat.SecurityData();
            sData31.volume = 72610.734259;
            sData31.close = 18036.54;
            sData31.high = 18292.74;
            sData31.low = 17572.34;
            sData31.open = 18254.82;
            sData31.date = 1607644800.0;
            securityDatas.push(sData31);
            let sData32 = new facecat.SecurityData();
            sData32.volume = 47592.761572;
            sData32.close = 18808.7;
            sData32.high = 18948.67;
            sData32.low = 18020.71;
            sData32.open = 18036.54;
            sData32.date = 1607731200.0;
            securityDatas.push(sData32);
            let sData33 = new facecat.SecurityData();
            sData33.volume = 56560.831744;
            sData33.close = 19175.0;
            sData33.high = 19411.01;
            sData33.low = 18711.13;
            sData33.open = 18808.7;
            sData33.date = 1607817600.0;
            securityDatas.push(sData33);
            let sData34 = new facecat.SecurityData();
            sData34.volume = 47257.211294;
            sData34.close = 19273.15;
            sData34.high = 19349.01;
            sData34.low = 19000.01;
            sData34.open = 19175.0;
            sData34.date = 1607904000.0;
            securityDatas.push(sData34);
            let sData35 = new facecat.SecurityData();
            sData35.volume = 61792.483421;
            sData35.close = 19426.44;
            sData35.high = 19570.01;
            sData35.low = 19050.01;
            sData35.open = 19273.7;
            sData35.date = 1607990400.0;
            securityDatas.push(sData35);
            let sData36 = new facecat.SecurityData();
            sData36.volume = 97061.040854;
            sData36.close = 21335.53;
            sData36.high = 21560.01;
            sData36.low = 19278.61;
            sData36.open = 19426.44;
            sData36.date = 1608076800.0;
            securityDatas.push(sData36);
            let sData37 = new facecat.SecurityData();
            sData37.volume = 148769.444419;
            sData37.close = 22808.99;
            sData37.high = 23699.71;
            sData37.low = 21233.01;
            sData37.open = 21335.53;
            sData37.date = 1608163200.0;
            securityDatas.push(sData37);
            let sData38 = new facecat.SecurityData();
            sData38.volume = 79646.144315;
            sData38.close = 23107.4;
            sData38.high = 23285.19;
            sData38.low = 22350.01;
            sData38.open = 22797.16;
            sData38.date = 1608249600.0;
            securityDatas.push(sData38);
            let sData39 = new facecat.SecurityData();
            sData39.volume = 82430.712232;
            sData39.close = 23821.62;
            sData39.high = 24171.48;
            sData39.low = 22750.01;
            sData39.open = 23107.4;
            sData39.date = 1608336000.0;
            securityDatas.push(sData39);
            let sData40 = new facecat.SecurityData();
            sData40.volume = 74797.201958;
            sData40.close = 23455.53;
            sData40.high = 24295.01;
            sData40.low = 23060.01;
            sData40.open = 23821.61;
            sData40.date = 1608422400.0;
            securityDatas.push(sData40);
            let sData41 = new facecat.SecurityData();
            sData41.volume = 83424.441428;
            sData41.close = 22719.72;
            sData41.high = 24102.78;
            sData41.low = 21815.01;
            sData41.open = 23455.55;
            sData41.date = 1608508800.0;
            securityDatas.push(sData41);
            let sData42 = new facecat.SecurityData();
            sData42.volume = 87033.13616;
            sData42.close = 23810.8;
            sData42.high = 23837.11;
            sData42.low = 22353.41;
            sData42.open = 22719.89;
            sData42.date = 1608595200.0;
            securityDatas.push(sData42);
            let sData43 = new facecat.SecurityData();
            sData43.volume = 112830.021287;
            sData43.close = 23232.77;
            sData43.high = 24100.01;
            sData43.low = 22810.01;
            sData43.open = 23810.8;
            sData43.date = 1608681600.0;
            securityDatas.push(sData43);
            let sData44 = new facecat.SecurityData();
            sData44.volume = 69013.844252;
            sData44.close = 23729.21;
            sData44.high = 23794.44;
            sData44.low = 22703.43;
            sData44.open = 23232.4;
            sData44.date = 1608768000.0;
            securityDatas.push(sData44);
            let sData45 = new facecat.SecurityData();
            sData45.volume = 78024.251646;
            sData45.close = 24712.48;
            sData45.high = 24789.87;
            sData45.low = 23434.74;
            sData45.open = 23729.0;
            sData45.date = 1608854400.0;
            securityDatas.push(sData45);
            let sData46 = new facecat.SecurityData();
            sData46.volume = 97806.523386;
            sData46.close = 26493.4;
            sData46.high = 26867.04;
            sData46.low = 24500.01;
            sData46.open = 24712.48;
            sData46.date = 1608940800.0;
            securityDatas.push(sData46);
            let sData47 = new facecat.SecurityData();
            sData47.volume = 145880.8092;
            sData47.close = 26281.67;
            sData47.high = 28422.01;
            sData47.low = 25700.01;
            sData47.open = 26493.41;
            sData47.date = 1609027200.0;
            securityDatas.push(sData47);
            let sData48 = new facecat.SecurityData();
            sData48.volume = 79408.740817;
            sData48.close = 27079.42;
            sData48.high = 27500.01;
            sData48.low = 26101.01;
            sData48.open = 26281.55;
            sData48.date = 1609113600.0;
            securityDatas.push(sData48);
            let sData49 = new facecat.SecurityData();
            sData49.volume = 69255.341092;
            sData49.close = 27385.01;
            sData49.high = 27410.01;
            sData49.low = 25880.01;
            sData49.open = 27079.43;
            sData49.date = 1609200000.0;
            securityDatas.push(sData49);
            let sData50 = new facecat.SecurityData();
            sData50.volume = 95356.067826;
            sData50.close = 28875.55;
            sData50.high = 28996.01;
            sData50.low = 27320.01;
            sData50.open = 27385.01;
            sData50.date = 1609286400.0;
            securityDatas.push(sData50);
            let sData51 = new facecat.SecurityData();
            sData51.volume = 75491.419522;
            sData51.close = 28923.64;
            sData51.high = 29300.01;
            sData51.low = 27850.01;
            sData51.open = 28875.56;
            sData51.date = 1609372800.0;
            securityDatas.push(sData51);
            let sData52 = new facecat.SecurityData();
            sData52.volume = 54134.113624;
            sData52.close = 29331.7;
            sData52.high = 29600.01;
            sData52.low = 28624.58;
            sData52.open = 28923.64;
            sData52.date = 1609459200.0;
            securityDatas.push(sData52);
            let sData53 = new facecat.SecurityData();
            sData53.volume = 126100.088124;
            sData53.close = 32178.34;
            sData53.high = 33300.01;
            sData53.low = 28946.54;
            sData53.open = 29331.71;
            sData53.date = 1609545600.0;
            securityDatas.push(sData53);
            let sData54 = new facecat.SecurityData();
            sData54.volume = 110771.806254;
            sData54.close = 33000.06;
            sData54.high = 34778.12;
            sData54.low = 31963.0;
            sData54.open = 32176.46;
            sData54.date = 1609632000.0;
            securityDatas.push(sData54);
            let sData55 = new facecat.SecurityData();
            sData55.volume = 121030.155465;
            sData55.close = 31988.72;
            sData55.high = 33600.01;
            sData55.low = 28130.01;
            sData55.open = 33000.06;
            sData55.date = 1609718400.0;
            securityDatas.push(sData55);
            let sData56 = new facecat.SecurityData();
            sData56.volume = 111890.475678;
            sData56.close = 33949.54;
            sData56.high = 34360.01;
            sData56.low = 29900.01;
            sData56.open = 31989.76;
            sData56.date = 1609804800.0;
            securityDatas.push(sData56);
            let sData57 = new facecat.SecurityData();
            sData57.volume = 116093.037717;
            sData57.close = 36769.37;
            sData57.high = 36939.22;
            sData57.low = 33288.01;
            sData57.open = 33949.54;
            sData57.date = 1609891200.0;
            securityDatas.push(sData57);
            let sData58 = new facecat.SecurityData();
            sData58.volume = 121506.449096;
            sData58.close = 39432.29;
            sData58.high = 40365.01;
            sData58.low = 36300.01;
            sData58.open = 36769.37;
            sData58.date = 1609977600.0;
            securityDatas.push(sData58);
            let sData59 = new facecat.SecurityData();
            sData59.volume = 138625.042444;
            sData59.close = 40582.82;
            sData59.high = 41950.01;
            sData59.low = 36500.01;
            sData59.open = 39432.49;
            sData59.date = 1610064000.0;
            securityDatas.push(sData59);
            let sData60 = new facecat.SecurityData();
            sData60.volume = 75785.989675;
            sData60.close = 40088.23;
            sData60.high = 41380.01;
            sData60.low = 38720.01;
            sData60.open = 40586.97;
            sData60.date = 1610150400.0;
            securityDatas.push(sData60);
            let sData61 = new facecat.SecurityData();
            sData61.volume = 112638.990321;
            sData61.close = 38150.03;
            sData61.high = 41350.01;
            sData61.low = 35111.12;
            sData61.open = 40088.23;
            sData61.date = 1610236800.0;
            securityDatas.push(sData61);
            let sData62 = new facecat.SecurityData();
            sData62.volume = 231175.583454;
            sData62.close = 35404.48;
            sData62.high = 38264.75;
            sData62.low = 30420.01;
            sData62.open = 38150.03;
            sData62.date = 1610323200.0;
            securityDatas.push(sData62);
            let sData63 = new facecat.SecurityData();
            sData63.volume = 133948.161996;
            sData63.close = 34051.25;
            sData63.high = 36628.01;
            sData63.low = 32531.01;
            sData63.open = 35410.38;
            sData63.date = 1610409600.0;
            securityDatas.push(sData63);
            let sData64 = new facecat.SecurityData();
            sData64.volume = 124477.924938;
            sData64.close = 37371.39;
            sData64.high = 37850.01;
            sData64.low = 32380.01;
            sData64.open = 34049.16;
            sData64.date = 1610496000.0;
            securityDatas.push(sData64);
            let sData65 = new facecat.SecurityData();
            sData65.volume = 102950.399421;
            sData65.close = 39144.51;
            sData65.high = 40100.01;
            sData65.low = 36701.24;
            sData65.open = 37371.39;
            sData65.date = 1610582400.0;
            securityDatas.push(sData65);
            let sData66 = new facecat.SecurityData();
            sData66.volume = 111365.804668;
            sData66.close = 36742.23;
            sData66.high = 39747.77;
            sData66.low = 34538.89;
            sData66.open = 39145.22;
            sData66.date = 1610668800.0;
            securityDatas.push(sData66);
            let sData67 = new facecat.SecurityData();
            sData67.volume = 86348.441508;
            sData67.close = 35994.99;
            sData67.high = 37950.01;
            sData67.low = 35357.81;
            sData67.open = 36737.44;
            sData67.date = 1610755200.0;
            securityDatas.push(sData67);
            let sData68 = new facecat.SecurityData();
            sData68.volume = 80157.737384;
            sData68.close = 35828.62;
            sData68.high = 36852.51;
            sData68.low = 33850.01;
            sData68.open = 35994.99;
            sData68.date = 1610841600.0;
            securityDatas.push(sData68);
            let sData69 = new facecat.SecurityData();
            sData69.volume = 70693.90404;
            sData69.close = 36631.28;
            sData69.high = 37469.84;
            sData69.low = 34800.01;
            sData69.open = 35825.0;
            sData69.date = 1610928000.0;
            securityDatas.push(sData69);
            let sData70 = new facecat.SecurityData();
            sData70.volume = 79596.541309;
            sData70.close = 35891.5;
            sData70.high = 37850.01;
            sData70.low = 35844.07;
            sData70.open = 36622.47;
            sData70.date = 1611014400.0;
            securityDatas.push(sData70);
            let sData71 = new facecat.SecurityData();
            sData71.volume = 89368.432918;
            sData71.close = 35468.24;
            sData71.high = 36415.32;
            sData71.low = 33400.01;
            sData71.open = 35901.95;
            sData71.date = 1611100800.0;
            securityDatas.push(sData71);
            let sData72 = new facecat.SecurityData();
            sData72.volume = 134548.811336;
            sData72.close = 30850.14;
            sData72.high = 35600.01;
            sData72.low = 30071.01;
            sData72.open = 35468.24;
            sData72.date = 1611187200.0;
            securityDatas.push(sData72);
            let sData73 = new facecat.SecurityData();
            sData73.volume = 138345.853436;
            sData73.close = 32945.18;
            sData73.high = 33826.54;
            sData73.low = 28850.01;
            sData73.open = 30852.0;
            sData73.date = 1611273600.0;
            securityDatas.push(sData73);
            let sData74 = new facecat.SecurityData();
            sData74.volume = 64595.297675;
            sData74.close = 32078.01;
            sData74.high = 33456.01;
            sData74.low = 31390.17;
            sData74.open = 32950.01;
            sData74.date = 1611360000.0;
            securityDatas.push(sData74);
            let sData75 = new facecat.SecurityData();
            sData75.volume = 57978.047966;
            sData75.close = 32259.91;
            sData75.high = 33071.01;
            sData75.low = 30900.01;
            sData75.open = 32078.01;
            sData75.date = 1611446400.0;
            securityDatas.push(sData75);
            let sData76 = new facecat.SecurityData();
            sData76.volume = 88499.236921;
            sData76.close = 32254.21;
            sData76.high = 34875.01;
            sData76.low = 31910.01;
            sData76.open = 32259.46;
            sData76.date = 1611532800.0;
            securityDatas.push(sData76);
            let sData77 = new facecat.SecurityData();
            sData77.volume = 84866.207055;
            sData77.close = 32467.78;
            sData77.high = 32921.89;
            sData77.low = 30837.38;
            sData77.open = 32254.2;
            sData77.date = 1611619200.0;
            securityDatas.push(sData77);
            let sData78 = new facecat.SecurityData();
            sData78.volume = 95911.971711;
            sData78.close = 30366.16;
            sData78.high = 32557.3;
            sData78.low = 29241.73;
            sData78.open = 32464.02;
            sData78.date = 1611705600.0;
            securityDatas.push(sData78);
            let sData79 = new facecat.SecurityData();
            sData79.volume = 92621.155617;
            sData79.close = 33364.87;
            sData79.high = 33783.99;
            sData79.low = 29842.11;
            sData79.open = 30362.2;
            sData79.date = 1611792000.0;
            securityDatas.push(sData79);
            let sData80 = new facecat.SecurityData();
            sData80.volume = 193388.622446;
            sData80.close = 34252.21;
            sData80.high = 38531.91;
            sData80.low = 31915.41;
            sData80.open = 33368.19;
            sData80.date = 1611878400.0;
            securityDatas.push(sData80);
            let sData81 = new facecat.SecurityData();
            sData81.volume = 82674.758249;
            sData81.close = 34262.89;
            sData81.high = 34933.01;
            sData81.low = 32825.01;
            sData81.open = 34246.29;
            sData81.date = 1611964800.0;
            securityDatas.push(sData81);
            let sData82 = new facecat.SecurityData();
            sData82.volume = 66269.928016;
            sData82.close = 33092.99;
            sData82.high = 34342.7;
            sData82.low = 32171.68;
            sData82.open = 34262.9;
            sData82.date = 1612051200.0;
            securityDatas.push(sData82);
            let sData83 = new facecat.SecurityData();
            sData83.volume = 80154.567802;
            sData83.close = 33526.38;
            sData83.high = 34717.28;
            sData83.low = 32296.17;
            sData83.open = 33089.45;
            sData83.date = 1612137600.0;
            securityDatas.push(sData83);
            let sData84 = new facecat.SecurityData();
            sData84.volume = 78056.66988;
            sData84.close = 35466.25;
            sData84.high = 35984.34;
            sData84.low = 33418.01;
            sData84.open = 33517.1;
            sData84.date = 1612224000.0;
            securityDatas.push(sData84);
            let sData85 = new facecat.SecurityData();
            sData85.volume = 80784.343663;
            sData85.close = 37618.88;
            sData85.high = 37662.64;
            sData85.low = 35362.39;
            sData85.open = 35472.72;
            sData85.date = 1612310400.0;
            securityDatas.push(sData85);
            let sData86 = new facecat.SecurityData();
            sData86.volume = 89024.320756;
            sData86.close = 36936.67;
            sData86.high = 38708.28;
            sData86.low = 36161.96;
            sData86.open = 37620.27;
            sData86.date = 1612396800.0;
            securityDatas.push(sData86);
            let sData87 = new facecat.SecurityData();
            sData87.volume = 65910.531514;
            sData87.close = 38290.25;
            sData87.high = 38310.13;
            sData87.low = 36570.01;
            sData87.open = 36936.66;
            sData87.date = 1612483200.0;
            securityDatas.push(sData87);
            let sData88 = new facecat.SecurityData();
            sData88.volume = 94232.612846;
            sData88.close = 39186.95;
            sData88.high = 40955.52;
            sData88.low = 38215.95;
            sData88.open = 38289.33;
            sData88.date = 1612569600.0;
            securityDatas.push(sData88);
            let sData89 = new facecat.SecurityData();
            sData89.volume = 81820.439177;
            sData89.close = 38795.7;
            sData89.high = 39700.01;
            sData89.low = 37351.01;
            sData89.open = 39181.02;
            sData89.date = 1612656000.0;
            securityDatas.push(sData89);
            let sData90 = new facecat.SecurityData();
            sData90.volume = 121568.794672;
            sData90.close = 46374.88;
            sData90.high = 46794.46;
            sData90.low = 37988.9;
            sData90.open = 38795.7;
            sData90.date = 1612742400.0;
            securityDatas.push(sData90);
            let sData91 = new facecat.SecurityData();
            sData91.volume = 114567.009318;
            sData91.close = 46420.43;
            sData91.high = 48142.2;
            sData91.low = 44961.1;
            sData91.open = 46374.87;
            sData91.date = 1612828800.0;
            securityDatas.push(sData91);
            let sData92 = new facecat.SecurityData();
            sData92.volume = 78292.89657;
            sData92.close = 44807.59;
            sData92.high = 47310.01;
            sData92.low = 43800.01;
            sData92.open = 46420.43;
            sData92.date = 1612915200.0;
            securityDatas.push(sData92);
            let sData93 = new facecat.SecurityData();
            sData93.volume = 81033.184776;
            sData93.close = 47969.52;
            sData93.high = 48678.91;
            sData93.low = 43994.03;
            sData93.open = 44807.59;
            sData93.date = 1613001600.0;
            securityDatas.push(sData93);
            let sData94 = new facecat.SecurityData();
            sData94.volume = 81856.490636;
            sData94.close = 47287.61;
            sData94.high = 48985.81;
            sData94.low = 46400.01;
            sData94.open = 47968.67;
            sData94.date = 1613088000.0;
            securityDatas.push(sData94);
            let sData95 = new facecat.SecurityData();
            sData95.volume = 58937.84066;
            sData95.close = 47153.7;
            sData95.high = 48150.01;
            sData95.low = 46202.54;
            sData95.open = 47298.16;
            sData95.date = 1613174400.0;
            securityDatas.push(sData95);
            let sData96 = new facecat.SecurityData();
            sData96.volume = 70700.864117;
            sData96.close = 48577.8;
            sData96.high = 49707.44;
            sData96.low = 47014.18;
            sData96.open = 47156.79;
            sData96.date = 1613260800.0;
            securityDatas.push(sData96);
            let sData97 = new facecat.SecurityData();
            sData97.volume = 63227.659425;
            sData97.close = 47911.11;
            sData97.high = 49010.93;
            sData97.low = 46174.79;
            sData97.open = 48580.48;
            sData97.date = 1613347200.0;
            securityDatas.push(sData97);
            let sData98 = new facecat.SecurityData();
            sData98.volume = 78018.176005;
            sData98.close = 49133.46;
            sData98.high = 50080.22;
            sData98.low = 47003.63;
            sData98.open = 47911.11;
            sData98.date = 1613433600.0;
            securityDatas.push(sData98);
            let sData99 = new facecat.SecurityData();
            sData99.volume = 84886.224046;
            sData99.close = 52119.72;
            sData99.high = 52618.75;
            sData99.low = 48947.01;
            sData99.open = 49133.46;
            sData99.date = 1613520000.0;
            securityDatas.push(sData99);
            let sData100 = new facecat.SecurityData();
            sData100.volume = 58093.930825;
            sData100.close = 51552.61;
            sData100.high = 52530.01;
            sData100.low = 50901.91;
            sData100.open = 52117.68;
            sData100.date = 1613606400.0;
            securityDatas.push(sData100);
  
            let xml = `<?xml version="1.0" encoding="utf-8"?>
              <html xmlns="facecat">
              <head>
              </head>
              <body>
                <div dock="fill" type="tab" selectedindex="0" name="TabView">
                <div name="TabPage" text="View" type="tabpage">
                  <chart size="200,200" name="Chart" text="Chart" location="212,164" dock="Fill">
                  </chart>
                </div>
                <div name="TabPage2" text="Indicator" type="tabpage" />
                <div name="TabPage3" text="Plot" type="tabpage" />
                </div>
              </body>
              </html>`;
			  facecat.renderFaceCat(gPaint, xml);
            let chart = facecat.findViewByName("Chart", gPaint.views);
            chart.backColor = "rgb(0,0,0)";
            chart.borderColor = "rgb(100,100,100)";
            chart.textColor = "rgb(255,255,255)";
            chart.scaleColor = "rgb(100,100,100)";
            chart.crossTipColor = "rgb(50,50,50)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgba(100,100,100,125)";
            chart.indicatorColors = new Array();
            chart.indicatorColors.push("rgb(255,255,255)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,0,255)");
            chart.indicatorColors.push("rgb(255,0,0)");
            chart.indicatorColors.push("rgb(0,255,255)");
            chart.indicatorColors.push("rgb(0,255,0)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,255,255)");
            tChart = chart;
            let tabPage2 = facecat.findViewByName("TabPage2", gPaint.views);
            let tabPage3 = facecat.findViewByName("TabPage3", gPaint.views);
            chart.rightVScaleWidth = 60;
            chart.location = new facecat.FCPoint(0, 0);
            chart.data = securityDatas;
            chart.mainIndicator = "BOLL"; //主图指标
            chart.showIndicator = "MACD"; //显示指标
            facecat.resetChartVisibleRecord(chart);
            facecat.checkChartLastVisibleIndex(chart);
            facecat.calcChartIndicator(chart);
  
            let indLayout = new facecat.FCLayoutDiv();
            indLayout.location = new facecat.FCPoint(0, 0);
            indLayout.size = new facecat.FCSize(tabPage2.size.cx, tabPage2.size.cy);
            indLayout.autoWrap = true;
            facecat.addViewToParent(indLayout, tabPage2);
            let indicators = new Array();
            indicators.push("MA");
            indicators.push("BOLL");
            indicators.push("MACD");
            indicators.push("KDJ");
            indicators.push("BIAS");
            indicators.push("BBI");
            indicators.push("RSI");
            indicators.push("ROC");
            indicators.push("WR");
            indicators.push("DMA");
            indicators.push("TRIX");
            indicators.push("CCI");
            for (i = 0; i < indicators.length; i++) {
              let button = new facecat.FCButton();
              button.text = indicators[i];
              button.viewName = "Indicator";
              button.size = new facecat.FCSize(100, 50);
              button.margin = new facecat.FCPadding(10, 10, 10, 10);
              button.location = new facecat.FCPoint(0, 0);
              button.backColor = "rgb(0,0,0)";
              button.textColor = "rgb(255,255,255)";
              button.borderColor = "rgb(150,150,150)";
              facecat.addViewToParent(button, indLayout);
            }
  
            let indLayout2 = new facecat.FCLayoutDiv();
            indLayout2.location = new facecat.FCPoint(0, 0);
            indLayout2.size = new facecat.FCSize(tabPage3.size.cx, tabPage3.size.cy);
            indLayout2.autoWrap = true;
            facecat.addViewToParent(indLayout2, tabPage3);
  
            let plots = new Array();
            plots.push("Line");
            plots.push("Segment");
            plots.push("Ray");
            plots.push("Triangle");
            plots.push("Rect");
            plots.push("Cycle");
            plots.push("CircumCycle");
            plots.push("Ellipse");
            plots.push("AngleLine");
            plots.push("LRLine");
            plots.push("LRChannel");
            plots.push("SymmetricTriangle");
            plots.push("LRBand");
            plots.push("ParalleGram");
            plots.push("SpeedResist");
            plots.push("FiboFanline");
            plots.push("FiboTimezone");
            plots.push("Percent");
            plots.push("BoxLine");
            plots.push("TironeLevels");
            plots.push("QuadrantLines");
            plots.push("Parallel");
            plots.push("GoldenRatio");
            plots.push("ArrowSegment");
            for (i = 0; i < plots.length; i++) {
              let button2 = new facecat.FCButton();
              button2.text = plots[i];
              button2.viewName = "Plot";
              button2.size = new facecat.FCSize(100, 50);
              button2.margin = new facecat.FCPadding(10, 10, 10, 10);
              button2.location = new facecat.FCPoint(0, 0);
              button2.backColor = "rgb(0,0,0)";
              button2.textColor = "rgb(255,255,255)";
              button2.borderColor = "rgb(150,150,150)";
              facecat.addViewToParent(button2, indLayout2);
            }
            facecat.updateViewDefault(gPaint.views);
          }
          init = true;
          facecat.invalidate(gPaint);
        }
    }, [])

    return <canvas ref={canvasRef} {...props} width={800} height={600} />
}

export default Canvas
